<template>
  <div class="container">
    <GanttComponent
      :tasks="ganttTasks"
      :columns="ganttColumns"
      :formColumns="gantFormColumns"
      @reset="reset"
      @onSubmit="onSubmit"
    ></GanttComponent>
  </div>
</template>

<script setup name="Index">
import { onMounted } from "vue";
import GanttComponent from "@/components/Gantt";
import { colorPickerProps } from "element-plus";
import { dateChange } from "@/utils/index.js";
import dayjs from "dayjs";

const ganttTasks = reactive({
  data: [
    {
      id: 1,
      text: "Task #1",
      responsible: "沈璃",
      status: "正常",
      start_date: "2024-01-04",
      end_date: "2024-01-09",
      actualStartTime: "2024-01-04",
      actualFinishTime: "2024-01-11",
    },
    {
      id: 2,
      text: "Task #2",
      responsible: "行止",
      status: "提前",
      start_date: "2024-01-04",
      end_date: "2024-01-06",
      actualStartTime: "2024-01-04",
      actualFinishTime: "2024-01-10",
    },
    {
      id: 3,
      text: "Task #3",
      responsible: "墨方",
      status: "延期",
      start_date: "2024-01-04",
      end_date: "2024-01-07",
      actualStartTime: "2024-01-03",
      actualFinishTime: "2024-01-20",
    },
  ],
});

// 渲染方法 实际时间
function addTaskLayer() {
  gantt.addTaskLayer({
    renderer: {
      render: function draw_planned(task) {
        // console.log(task);
        if (task.actualStartTime && task.actualFinishTime) {
          var sizes = gantt.getTaskPosition(
            task,
            task.actualStartTime,
            task.actualFinishTime
          );
          var el = document.createElement("div");
          el.className = "baseline";
          el.style.left = sizes.left + "px";
          el.style.width = sizes.width + "px";
          el.style.top = sizes.top + gantt.config.task_height + 17 + "px";
          return el;
        }
        return false;
      },
      getRectangle: function (task, view) {
        if (task.actualStartTime && task.actualFinishTime) {
          return gantt.getTaskPosition(
            task,
            task.actualStartTime,
            task.actualFinishTime
          );
        }
        return null;
      },
    },
  });
  // 暂时没有用到
  gantt.templates.task_class = function (start, end, task) {
    if (task.actualFinishTime) {
      // 在这种情况下，会给任务添加一个 CSS 类 has-baseline，表示任务有基准线
      var classes = ["has-baseline"];
      //如果任务的结束时间晚于实际完成时间，会再添加一个 CSS 类 overdue，表示任务已过期。
      if (end.getTime() > task.actualFinishTime.getTime()) {
        classes.push("overdue");
      }
      return classes.join(" ");
    }
  };

  gantt.attachEvent("onTaskLoading", function (task) {
    task.actualStartTime = gantt.date.parseDate(
      task.actualStartTime,
      "xml_date"
    );
    task.actualFinishTime = gantt.date.parseDate(
      task.actualFinishTime,
      "xml_date"
    );
    return true;
  });
  // 配置了一个名为 "baseline" 的弹出窗口部分，允许用户设置任务的开始时间和结束时间，并在界面上显示为计划的时间段（暂时没有用到）
  gantt.config.lightbox.sections = [
    {
      name: "baseline",
      map_to: { start_date: "actualStartTime", end_date: "actualFinishTime" },
      button: true,
      type: "duration_optional",
    },
  ];
  //设置部分标题的文本标签
  gantt.locale.labels.section_baseline = "Planned";
}

// 开始时间-结束时间参数
const DateDifference = (strDateStart, strDateEnd) => {
  let begintime_ms = Date.parse(new Date(strDateStart.replace(/-/g, "/"))); //begintime 为开始时间
  var endtime_ms = Date.parse(new Date(strDateEnd.replace(/-/g, "/"))); // endtime 为结束时间
  var date3 = endtime_ms - begintime_ms; //时间差的毫秒数
  var days = Math.floor(date3 / (24 * 3600 * 1000)); //向下取整 计算相差的天数
  return days;
};

// 在加载任务数据之前对结束日期进行处理添加一天,正确显示任务的结束日期,
//注意⚠️ 在将从甘特图收到的更改保存回数据存储之前从结束日期中减去一天
gantt.templates.task_end_date = function (date) {
  return gantt.templates.task_date(new Date(date.valueOf() - 1));
};
var gridDateToStr = gantt.date.date_to_str("%Y-%m-%d");
gantt.templates.grid_date_format = function (date, column) {
  if (column === "actualFinishTime" || column === "end_date") {
    return gridDateToStr(new Date(date.valueOf() - 1));
  } else {
    return gridDateToStr(date);
  }
};

const ganttColumns = ref([
  {
    name: "id",
    label: "序号",
    align: "center",
  },
  {
    name: "text",
    label: "任务名称",
    align: "center",
  },
  {
    name: "responsible",
    label: "负责人",
    align: "center",
  },
  {
    name: "status",
    label: "任务状态",
    align: "center",
  },
  {
    name: "start_date",
    label: "计划开始",
    align: "center",
    min_width: 100,
  },
  {
    name: "end_date",
    label: "计划结束",
    align: "center",
    min_width: 100,
  },
  {
    name: "actualStartTime",
    label: "实际开始",
    align: "center",
    min_width: 100,
  },
  {
    name: "actualFinishTime",
    label: "实际完成",
    align: "center",
    min_width: 100,
  },
]);

let gantFormColumns = [
  {
    name: "projectName",
    label: "项目名称",
    align: "center",
    width: 90,
    inSearch: true,
    valueType: "select",
    options: [
      {
        value: "year",
        label: "task1",
      },
    ],
  },
  {
    name: "unit",
    label: "查看周期",
    align: "center",
    width: 90,
    inSearch: true,
    valueType: "select",
    options: [
      {
        value: "year",
        label: "按年查看",
      },
      {
        value: "month",
        label: "按月查看",
      },
      {
        value: "day",
        label: "按日查看",
      },
    ],
  },
];

const gantDateScale = ref();

const onSubmit = (val) => {
  console.log(val, "----val的值---");
};

const reset = () => {
  console.log("重置");
};

// const initDate = (data, startDate, endDate) => {
//   console.log(data, startDate, endDate);
// };

onMounted(async () => {
  await addTaskLayer();
});
</script>

<style >
/* @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css"; */
.container{
  padding:0px 20px;
}
.gantt-head {
  background: #fff;
  border-radius: 10px;
  /* padding:8px; */
  margin-bottom: 10px;
  padding:16px;
  border-radius:4px;
  /* display: flex;
  align-items: center; */
}
.el-form-item--default{
  margin-bottom: 0px;
}

.gantt_task_line {
  background-color: #3b97fe;
  border: #3b97fe;
  height: 10px !important;
  /* border-radius: 100px; */
  margin-top: 8px;
  margin-bottom: 10px !important;
}

.gantt_line_wrapper {
  margin-top: -9px;
}

.gantt_task_progress {
  background: #ffd180;
  border-top-right-radius: 100px;
  border-radius: 100px;
}
.baseline {
  position: absolute;
  /* border-radius: 100px; */
  margin-top: -10px;
  height: 10px;
  background: #ffc93a;
}

.gantt_layout_cell ::-webkit-scrollbar {
  height: 8px;
}
.gantt_layout_cell ::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #f5f5f5;
}
.gantt_layout_cell::-webkit-scrollbar {
  border-radius: 8px;
  background-color: #b9b9b9;
}
</style>

